<template>
    <div class="login_back" style="background-image: url('/img/common/t0196dfad56317fe205.jpg');">
        <div class="login">
            <form v-if="choose===1">
                <h2>登录</h2>
                <input class="selected" type="text" placeholder="输入账号或邮箱" v-model="users.username"
                       :style="{'background': users.username!='' ? 'rgba(220, 76, 76, 0.6)':''}">
                <input class="selected" type="password" placeholder="请输入密码" v-model="users.password" v-if="captcha"
                       :style="{'background': users.password!='' ? 'rgba(220, 76, 76, 0.6)':''}">
                <div class="captcha_input">
                    <input type="text" placeholder="验证码" style="" v-model="users.captcha"
                           :style="{'background': users.captcha!=='' ? 'rgba(220, 76, 76, 0.6)':''}">
                    <p class="fetch captcha">
                        <span id="captcha_">{{ login_captcha[0] }}</span>
                        <span id="captcha_">{{ login_captcha[1] }}</span>
                        <span id="captcha_">{{ login_captcha[2] }}</span>
                        <span id="captcha_">{{ login_captcha[3] }}</span>
                        <span id="captcha_">{{ login_captcha[4] }}</span>
                        <span id="captcha_">{{ login_captcha[5] }}</span>
                        <i @click="fetch($event)" class="button">换一张</i>
                    </p>
                </div>
                <span class="denglv" @click="login">登录</span>
                <div class="auto">
                    <span @click.stop="recover_password">忘记密码</span>
                    <span @click.stop="registration">没有账号？注册</span>
                </div>
                <div class="thirdParty">
                    <img src="/img/common/qq.png" title="QQ" alt="" @click="infos(sys)">
                    <img src="/img/common/weixin.png" title="微信" alt="" @click="infos(sys)">
                    <img src="/img/common/phone.png" title="手机" alt="" @click="infos(sys)">
                </div>
            </form>
            <Enroll v-else-if="choose===2" @stateSwitching="stateSwitching"></Enroll>
            <RecoverThePassword v-else-if="choose===3" @stateSwitching="stateSwitching"></RecoverThePassword>
        </div>
    </div>


    <PromptInformation :style="{'display':info!=='' ? 'flex':'none'}">{{ info }}</PromptInformation>

</template>

<script>
import PromptInformation from "@/components/PublicComponents/PromptInformation.vue";
import api from "@/api";
import Enroll from "@/components/signUpAndLogIn/Enroll.vue";
import RecoverThePassword from "@/components/signUpAndLogIn/RecoverThePassword.vue";

export default {
    name: "Login",
    components: {RecoverThePassword, Enroll, PromptInformation},
    data() {
        return {
            time: "",
            times: 3,
            index: true,
            index_info: true,
            pas: false,
            captcha: true,
            info: "",
            time_info: "",
            users: {
                username: "",
                password: "",
                captcha: "",
                captcha_id: "",
            },
            sys: "系统正在升级",
            bi_: true,
            choose: 1,
            login_captcha: "",
        }
    },
    mounted() {
        this.rand_captcha();
        api.loginCaptcha().then((res) => {
            this.login_captcha = res.data.data.uuidValue.split('');
            this.users.captcha_id = res.data.data.id;
        })
        const this_ = this;
        document.onkeydown = function key(e){
            let keydown = window.event ? e.keyCode : e.which
            if(keydown === 13){
                if(!this_.users.captcha || !this_.users.password || !this_.users.username){
                    return;
                }
                this_.login()
            }
        };
    },
    methods: {
        stateSwitching(v) {
            this.choose = v;
        },
        rand_captcha() {
            let captcha = window.document.querySelectorAll("#captcha_");
            let index;
            for (let i = 0; i < 4; i++) {
                index = Math.floor(Math.random() * 5);
                captcha[index].className = "rotate_left";
            }
            captcha[Math.floor(Math.random() * 5)].className = "rotate_right";
            captcha[Math.floor(Math.random() * 5)].className = "rotate_right";
        },
        registration() {
            this.choose = 2;
        },
        recover_password() {
            this.choose = 3;
        },
        login() {
            this.LoadTheAnimation();
            let token = window.localStorage.getItem("AUTHORIZATION_TOKEN");
            if (token != null) {
                this.infos("您已经登录无需重复登录!")
                this.LoadTheAnimation();
                return;
            }
            let _this = this;
            api.login(this.users).then((res) => {
                if (res.data.code === 200) {
                    window.localStorage.setItem("AUTHORIZATION_TOKEN", res.data.data.token)
                    window.localStorage.setItem("user", JSON.stringify(res.data.data.user));
                    this.$router.replace({path: '/home'});
                } else {
                    api.loginCaptcha().then((res) => {
                        this.login_captcha = res.data.data.uuidValue.split('');
                        this.users.captcha_id = res.data.data.id;
                    })
                    api.deleteCaptcha(this.users.captcha_id).then((res) => {
                        this.rand_captcha();
                    })
                }
                this.users.username = "";
                this.users.password = "";
                this.users.captcha = "";
                this.infos(res.data.msg)
            }).catch(() => {
                this.infos("网络异常，请求超时")
            })
            this.LoadTheAnimation();
        },
        LoadTheAnimation() {
            this.$store.commit("LoadTheAnimation");
        },
        fetch(e) {
            if (this.index) {
                e.target.innerHTML = '4s';
                api.loginCaptcha().then((res) => {
                    this.login_captcha = res.data.data.uuidValue.split('');
                    this.users.captcha_id = res.data.data.id;
                })
                api.deleteCaptcha(this.users.captcha_id).then((res) => {

                })
                this.index = false;
                this.pas = !this.pas;
                clearInterval(this.time);
                this.rand_captcha();
                this.time = setInterval(() => {
                    e.target.innerHTML = this.times-- + 's';
                    if (this.times === -1) {
                        clearInterval(this.time)
                        e.target.innerHTML = "换一张";
                        this.times = 3;
                        this.index = true;
                        this.pas = !this.pas;
                    }
                }, 1000)
            }

        },
        email() {
            let h = document.querySelector("h2");
            if (this.captcha === !this.captcha) {
                h.innerHTML = "登录"
            } else h.innerHTML = "邮箱登录"
            this.user.username = "";
            this.user.password = "";
            this.user.captcha = "";

        },

        infos(str) {
            this.info = "";
            this.info = str;
            if (this.index_info) {
                this.index_info = false;
                this.pas = !this.pas;
                clearInterval(this.time_info);
                this.time_info = setInterval(() => {
                    this.info = "";
                    this.index_info = true;
                }, 4000)
            }
        },


    },


    beforeDestroy() {
    }

}
</script>

<style scoped>

body {
    box-sizing: border-box;
}

.login_back {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    border: 1px solid #ada8a8;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: back 2s ease-in-out 0s infinite;
    background-size: cover !important;
}

@keyframes back {
    0% {
        background-position-y: 50%;
    }
    25% {
        background-position-y: 58%;
    }
    100% {
        background-position-y: 50%;
    }

}

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 350px;
}

.captcha_input {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px
}

.captcha_input input {
    min-height: 40px
}

input::placeholder {
    color: #eadcdc;
}
.captcha_input p{
    min-width: 90px;
}
input, .denglv {
    text-indent: 0.5rem;
    color: white;
    font-size: 14px;
    min-font-size: 12px;
    height: 5vh;
    width: 15vw;
    min-width: 250px;
    min-height: 35px;
    outline: none;
    background: none;
    margin-bottom: 3vh;
    border: 1px solid #ffffff;
    border-radius: 3px;
    transition: all .3s;
}

.denglv {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
}

.captcha {
    position: absolute;
    right: 0;
    top: 0;
    width: 5vw;
    height: 4.95vh;
    min-height: 39.8px;
    min-width: 70px;
    border-radius: 1px;
}

.login {
    margin: auto;
    transform: translateY(60%);
    padding: 1vh;
    min-width: 250px;
    min-height: 200px;
    border: 1px solid #ffffff;
    background: rgba(232, 220, 220, 0.3);
    border-radius: 5px;
    animation: login 0.8s ease-in-out 0s 1 alternate forwards;
    backdrop-filter: blur(4px); /* 模糊半径 */
    transition: all .5s;
}

.login:hover {
    box-shadow: 0 0 5px 1px #f8f3f3;
}

@keyframes login {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

h2 {
    color: #faf7f7;
    padding: 10px;
    font-weight: bolder;
}

.selected:hover, .denglv:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px 1px #f8f3f3;
    background: rgba(220, 76, 76, 0.6);
}

.thirdParty img {
    margin-left: 1rem;
    transition: all .5s;
}

.thirdParty img:first-child {
    margin-left: 0;
}

.thirdParty img:hover {
    transform: scale(1.2);

}

.fetch {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    border: 0;
    color: #fcfbfb;
    font-weight: bolder;
    background: #8f8c8c;
}

.fetch:hover {
    cursor: pointer;
    opacity: .9;
}

.fetch span {
    position: relative;
    padding: 3px;
    font-size: 14px;
}

.button {
    position: absolute;
    right: 0;
    bottom: -35%;
    font-size: 13px;
    content: "换一张";
}

.button:hover {
    color: #f35858;
    text-decoration: underline;
}

.rotate_left {
    transform: rotate(40deg);
}

.rotate_right {
    transform: rotate(-30deg);
}

.time {
    display: inline-block;
    position: absolute;
    padding: 5px;
    right: 0;
    top: 0;
    transform: translate(100%, 50%);
    font-weight: bolder;
    color: #3586f1;
}

.info {
    display: none;
}

.auto {
    width: 17vw;
    min-width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vh;
}

.auto span {
    color: white;
    transition: all .2s;
}

.auto span:hover {
    cursor: pointer;
    transform: scale(1.05);
    text-decoration: underline;
}

label {
    display: flex;
}

.agreement span {
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
}

.agreement span:hover {
    text-decoration: underline;
    color: #f64848;
}


@media (min-height: 0) and (max-height: 500px) {
    input {
        margin-bottom: 15px;
    }

    .fetch span {
        position: relative;
        padding: 2px;
        font-size: 12px;
    }
}

@media (min-width: 0) and (max-width: 800px) {
    .fetch span {
        position: relative;
        padding: 2px;
        font-size: 12px;
    }
    .login{
        min-width: 350px;
    }
    input::placeholder{
         min-font-size: 15px;
    }

}
</style>